<template>
  <el-table :data="data" class="el-table1" style="text-align: center">
    <el-table-column label="日期">
      <template slot-scope="index">
        <span>{{ index.row.date }}</span>
      </template>
    </el-table-column>
    <el-table-column label="姓名">
      <template slot-scope="index">
        <el-popover
          placement="top"
          trigger="hover"
        >
        <p>姓名：{{index.row.name}}</p>
        <p>地址：{{index.row.address}}</p>
          <el-button slot="reference">{{ index.row.name }}</el-button>
        </el-popover>
      </template>
    </el-table-column>
    <!-- <el-table-column colspan="2" label="地址">
      <template slot-scope="index">
        <span>{{ index.row.address }}</span>
      </template>
    </el-table-column> -->
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button size="mini" @click="edit(scope.$index, scope.row)"
          >编辑</el-button
        >
        <el-button
          size="mini"
          @click="del(scope.$index, scope.row)"
          type="danger"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>


<script>
export default {
  data() {
    return {
      data: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  methods: {
    edit(index, row) {
      console.log(index, row);
      this.$message("编辑");
    },
    del(index, row) {
      console.log(index, row);
      this.$message({
        message: "删除",
        type: "error",
      });
    },
  },
};
</script>

<style  scoped>
.el-table {
  width: 50%;
  border: 1px solid #ccc;
  margin: 0 auto;
}
.el-table1.el-table.el-table--fit.el-table--enable-row-hover.el-table--enable-row-transition {
  text-align: center;
}
.top {
  text-align: center;
}
</style>
